import {VueComponent, Component} from "modules";
import {Mutation, State, Action} from "vuex-class";
import IView from "interface/IView";

// import VButton from "iview/components/button";
import testChart       from "components/test-chart.vue";
import columnChart       from "components/Columnar-chart.vue";
import pieChart       from "components/pieChart.vue";

@Component({
  components: {testChart, columnChart, pieChart},
})
export default class HomeMain extends VueComponent implements IView {
  @State("bottomState", {namespace: "Home"})
  public bottomState: any;
  @Mutation("setBottomState", {namespace: "Home"})
  public setBottomState: any;
  @Action("getList", {namespace: "Home"})
  public getList: any;
  public isCollapse: any;
  public tableData: any;
  public activeIndex: any;
  public activeIndex2: any;
  public name: any;
  public address: any;
  public selectOptions: any;
  public value1: any;
  public value: any;
  public radio: any;
  public arrList: any;
  public constructor() {
    super();
    this. tableData = [{
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄55",
      tag: "家",
    }, {
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄",
      tag: "公司",
    }, {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄",
      tag: "公司",
    }, {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄2",
      tag: "公司",
    }];
    this.isCollapse = false;
    this.activeIndex = "1";
    this.activeIndex2 = "1";
    this.name = "刘德华";
    this.address = "深圳科技园 ";
    this.selectOptions = [
      {
        value: "选项1",
        label: "黄金糕",
      }, {
        value: "选项2",
        label: "双皮奶",
      }, {
        value: "选项3",
        label: "蚵仔煎",
      }, {
        value: "选项4",
        label: "龙须面",
      }, {
        value: "选项5",
        label: "北京烤鸭",
      },
    ];
    this.value1 = "";
    this.value = "";
    this.radio = "1";
    this.arrList = ["13", "23", "rew", "rtw", "rt", "fwe"];
  }
  public objectSpanMethod( row: any, column: any, rowIndex: any, columnIndex: any) {
    if (columnIndex === 0) {
      if (rowIndex % 2 === 0) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }
  }
  public created() {
    this.initData();
  }
  public async initData() {
    const data = await this.getList();
    const chartBox: any = this.$refs.testLineCHart;
    console.log(this.$refs.testLineCHart, "=========================");
    this.arrList = [9, 9, 9, 9, 9, 9, 9, 9, 9];
    chartBox.setItem(this.arrList);
    // TODO
  }
  public back() { /*ss*/ }
  public clickFn() {
    this.setBottomState("点击了");
    this.getList();
  }
  public toTestPage() {
    this.router.next("/account/login");
    this.tableData[0].name = "刘德华";
  }
  public handleOpen(key: any, keyPath: any) {
    console.log(key, keyPath);
  }
  public handleClose(key: any, keyPath: any) {
    console.log(key, keyPath);
  }
  public handleSelect(key: any, keyPath: any) {
    console.log(key, keyPath);
  }
  public changeMenuFn() {
    const result    = this.isCollapse;
    this.isCollapse = !result;
  }
  public filterTag(value: any, row: any) {
    return row.tag === value;
  }
  public searchFn() {
    this.arrList = [91, 91, 91, 91, 91, 91, 91, 91, 91];
    const chartBox: any = this.$refs.testLineCHart;
    chartBox.setItem(this.arrList);
  }
}
